<template>
  <div>
    <div id="container" style="height: 1000px" />
  </div>
</template>

<script>
import AMap from '@/utils/AMap'
import echarts from 'echarts'
export default {
  name: 'Home',
  data() {
    return {
      map: null,
      infoWindow: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initAMap()
    })
  },
  methods: {
    async initAMap() {
      try {
        const self = this
        const res = await AMap()
        this.map = new res.Map('container', {
          resizeEnable: true, // 是否监控地图容器尺寸变化
          zoom: 13, // 初始化地图层级
          mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
          // center: [108.096154, 34.264296] // 初始化地图中心点
          center: [116.43, 39.92] // 初始化地图中心点
        })
        const polygonPath = [new res.LngLat(116.46, 39.93), new res.LngLat(116.44, 39.91), new res.LngLat(116.49, 39.91)]

        const polygon = new res.Polygon({
          title: '12',
          id: '111111111',
          path: polygonPath,
          strokeColor: '#fff', // 线颜色
          strokeOpacity: 0.2, // 线透明度
          strokeWeight: 3, // 线宽
          fillColor: '#fff', // 填充色
          fillOpacity: 0.8 // 填充透明度
        })
        const markers = []
        markers.push(polygon)
        const overlayGroups = new res.OverlayGroup(markers)
        this.map.add(overlayGroups)
        polygon.on('click', function(e) {
          //console.log(e)
          self.openInfo(res, e.lnglat)
        })
        const arr1 = [
          [116.368904, 39.923423],
          [116.382122, 39.921176],
          [116.387271, 39.922501],
          [116.398258, 39.9146]
        ]
        // 添加点
        for (let i = 0; i < 4; i++) {
          const marker = new res.Marker({
            map: this.map,
            icon: require('./../../assets/img/map/1.png'),
            position: arr1[i]
          })
          marker.on('click', function(e) {
            self.openInfo1(res, e.lnglat)
          })
        }
      } catch (err) {
        console.error(err)
      }
    },
    createInfoWindow(title, content) {
      var info = document.createElement('div')
      info.className = 'custom-info input-card content-window-card'
      // 可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement('div')
      var titleD = document.createElement('div')
      var closeX = document.createElement('img')
      top.className = 'info-top'
      titleD.innerHTML = title
      closeX.src = 'https://webapi.amap.com/images/close2.gif'
      closeX.onclick = this.closeInfoWindow
      top.appendChild(titleD)
      top.appendChild(closeX)
      info.appendChild(top)

      // 定义中部内容
      var middle = document.createElement('div')
      middle.className = 'info-middle'
      middle.innerHTML = content
      info.appendChild(middle)

      // 定义底部内容
      var bottom = document.createElement('div')
      bottom.className = 'info-bottom'
      bottom.style.position = 'relative'
      bottom.style.top = '0px'
      bottom.style.margin = '0 auto'
      var sharp = document.createElement('img')
      sharp.src = 'https://webapi.amap.com/images/sharp.png'
      bottom.appendChild(sharp)
      info.appendChild(bottom)
      return info
    },
    openInfo1(res, lnglat) {
      var title = '方恒假日酒店'
      var content = []
      const self = this
      content.push('<div class="flex"><div class="w-120">性别:</div><div>男</div></div>')
      content.push('<div class="flex"><div class="w-120">性别:</div><div>男</div></div>')
      content.push('<div class="flex"><div class="w-120">性别:</div><div>男</div></div>')
      content.push('<div class="flex"><div class="w-120">性别:</div><div>男</div></div>')
      content.push('<div class="flex"><div class="w-120">性别:</div><div>男</div></div>')
      content.push('<div class="flex"><div class="w-120">性别:</div><div>男</div></div>')
      content.push('<div class="echarts-test" id="mapEcharts"></div>')

      this.infoWindow = new res.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: self.createInfoWindow(title, content.join('<br/>')),
        offset: new res.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, lnglat)
      setTimeout(() => {
        var myChart = echarts.init(document.getElementById('mapEcharts'))
        var option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }, 100)
    },
    closeInfoWindow() {
      this.map.clearInfoWindow()
    },
    openInfo(res, lnglat) {
      // 构建信息窗体中显示的内容
      const info = []
      info.push('<div><div><img style="float:left;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ')
      info.push('<div style="padding:0px 0px 0px 4px;"><b>高德软件</b>')
      info.push('电话 : 010-84107000   邮编 : 100102')
      info.push('地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>')
      this.infoWindow = new res.InfoWindow({
        content: info.join('<br/>') // 使用默认信息窗体框样式，显示信息内容
      })
      this.infoWindow.open(this.map, lnglat)
    }
  }
}
</script>

<style lang="scss">
.echarts-test {
  width: 300px;
  height: 300px;
}
.amap-info-contentContainer {
  width: 500px;
}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}

.test {
  z-index: 1000;
  position: fixed;
  top: 300px;
  left: 300px;
  background: #fff;
}

.w-30 {
  width: 30%;
}
</style>
